<template>
  <div class="easy-container border-bottom flex align-items-center">
    <el-tag :type="stateTag.type" effect="dark">{{ stateTag.label }}</el-tag>
    <router-link
      :to="`/users/${curContrib.author.id}`"
      class="flex align-items-center"
      target="_blank">
      <el-avatar :src="curContrib.author.avatar" :size="24" class="m-r-5" />
      <span class="title">{{ curContrib.author.nickname }}</span>
    </router-link>
    <timeago2 :date-time="curContrib.created_at" pre-text="创建于" class="m-l-10" />
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'header-state',
  computed: {
    ...mapState({
      curContrib: 'currentContribution',
    }),
    // 页头处的贡献状态标记
    stateTag() {
      if (!this.curContrib.closed) { // 未关闭就是 待审核
        return { type: '', label: '待审核' };
      } else if (this.curContrib.accepted) { // 关闭且接受了就是 已接受
        return { type: 'success', label: '已接受' };
      }
      return { type: 'danger', label: '已关闭' }; // 关闭且未接受 已关闭
    },
  },
};
</script>

<style></style>
